<!-- staffInfo -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'staff',
          name: 'Staff',
        },
        {
          routeName: 'Ada Yeo',
          name: 'Ada Yeo',
        },
        {
          name: 'Personal info',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="Staff">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      <div><router-link to="/staffInfo">staff-info</router-link></div>
      <div><router-link to="/privileges">staffInfoEdit</router-link></div>
      <div><router-link to="/staff">staff-index</router-link></div>
      </template>
      <GgPageHeader
        :userInfo="userInfo"
        title="Ada Yeo"
        subTitle1="ABCDE1234@email.com"
      >
        <div
          slot="title-label"
          class="title-label"
          @click="viewLocations = true"
        >
          <span>{{ viewLabel }}</span>
          <img
            v-if="checkedData.length > 1"
            class="icon-view"
            src="@/assets/images/icons/icon-view.png"
            alt=""
          />
        </div>
        <div slot="subTitleLabel" class="title-label">Teacher</div>
        <div slot="info">
          <div class="title-status mar-b-0">Active</div>
        </div>
      </GgPageHeader>
      <Section title="Profile" :hasFooter="true">
        <div>aaaa</div>
        <span slot="footer">
          <gg-cancel-button @click="isDialogShow1 = false"
            >Cancel</gg-cancel-button
          >
          <gg-submit-button @click="isDialogShow1 = false"
            >Save</gg-submit-button
          >
        </span>
      </Section>
    </GgPage>
    <!-- view locations -->
    <gg-Dialog
      :append-to-body="false"
      :visible.sync="viewLocations"
      :show-close="true"
      title="Locations"
    >
      <div class="dialog-content">
        <CheckboxGroup
          :checkTitle="checkTitle"
          :checkedData="checkedData"
          :checkboxList="checkboxList"
          @check="handleCheck"
        />
      </div>
    </gg-Dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      menuDatas: [
        {
          name: "Personal info",
          key: "personalInfo",
          active: true,
          children: [],
        },
        {
          name: "App access",
          key: "appAccess",
        },
      ],
      activeIndex: "personalInfo",
      userInfo: {
        avatar: require("@/assets/logo.png"),
        firstName: "Dierdre",
        lastName: "Hu",
        email: "Dierdre.hu@edoovo.com",
      },
      viewLocations: false,
      checkTitle: "Raffles Kidz International",
      checkedData: ["Yio Chu Kang", "Bukit Panjang"],
      checkboxList: ["Yio Chu Kang", "Bukit Panjang", "Punggol", "Jurong West"],
    };
  },
  computed: {
    viewLabel() {
      let checkedDataLen = this.checkedData.length,
        checkboxListLen = this.checkboxList.length;
      if (checkedDataLen == 1) {
        return this.checkedData[0];
      } else if (checkedDataLen == checkboxListLen) {
        return "All  locations";
      } else {
        return checkedDataLen + "locations";
      }
    },
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
      this.$router.push({ name: item.key });
    },
    handleCheck(val) {
      this.checkedData = val;
      // console.log(this.locations);
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
/deep/ .section-main {
  padding: 0;
}
/deep/ .el-dialog__body {
  max-height: 412px;
  overflow-y: auto;
}
</style>